<template>
  <div v-loading="loading">
    <basic-container>
      <curd-title :title="'基本信息'" />
      <avue-form ref="form" :option="option" v-model="form">
        <template slot="supplierName" v-if="type !== 'view'">
          <el-input class="pointer" v-model="form.supplierName" @focus="selectSupplier" placeholder="请选择" readonly>
            <i slot="suffix" class="el-icon-search"></i>
          </el-input>
        </template>
        <template slot="attachments">
          <easy-upload
            style="display: inline"
            :drag="false"
            v-model="form.attachments"
            :view-with-count="['view'].includes(type)"
          />
        </template>
      </avue-form>
    </basic-container>
    <basic-container>
      <curd-title :title="'供应商信息'" />
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <el-descriptions
            :column="3"
            border
            size="medium"
            labelStyle="width:130px;text-align:right;"
            v-loading="baseLoading"
          >
            <el-descriptions-item label="供应商名称">{{ supplierInfo.supplierName }} </el-descriptions-item>
            <el-descriptions-item label="供应商简称">{{ supplierInfo.supplierShortName }} </el-descriptions-item>
            <el-descriptions-item label="成立日期">{{ supplierInfo.establishDate }}</el-descriptions-item>
            <el-descriptions-item label="境内外关系">{{ supplierInfo.outbound_dictText }}</el-descriptions-item>
            <el-descriptions-item label="统一社会信用代码" v-if="supplierInfo.outbound === '0'">{{
              supplierInfo.socialCreditCode
            }}</el-descriptions-item>
            <el-descriptions-item label="境外识别码" v-else>{{ supplierInfo.outsideIdentifier }}</el-descriptions-item>
            <el-descriptions-item label="集团名称">{{ supplierInfo.groupName }}</el-descriptions-item>
            <el-descriptions-item label="公司类型">{{ supplierInfo.companyType_dictText }}</el-descriptions-item>
            <el-descriptions-item label="所属行业">{{ supplierInfo.capitalType_dictText }}</el-descriptions-item>
            <el-descriptions-item label="公司网址">{{ supplierInfo.website }}</el-descriptions-item>

            <el-descriptions-item label="区域">{{ supplierInfo.area }}</el-descriptions-item>
            <el-descriptions-item label="注册地址">{{ supplierInfo.registerAddr }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ supplierInfo.contacts }}</el-descriptions-item>
            <el-descriptions-item label="联系人职务">{{ supplierInfo.contactPost }}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{ supplierInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="邮件">{{ supplierInfo.email }}</el-descriptions-item>
            <el-descriptions-item label="固定电话">{{ supplierInfo.telephone }}</el-descriptions-item>
            <el-descriptions-item label="厂房面积">{{ supplierInfo.plantArea }}</el-descriptions-item>
            <el-descriptions-item label="总人数">{{ supplierInfo.totalNumber }}</el-descriptions-item>
            <el-descriptions-item label="经营范围" :span="3">{{ supplierInfo.busScope }}</el-descriptions-item>
            <el-descriptions-item label="公司简介">{{ supplierInfo.companyProfile }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="联系人信息">
          <contacts-info ref="contacts" />
        </el-tab-pane>
        <el-tab-pane label="财务信息">
          <finance-info ref="finance" />
        </el-tab-pane>
        <el-tab-pane label="资质信息">
          <qualifications-info ref="qualifications" />
        </el-tab-pane>
        <el-tab-pane label="工程/产品信息"> <factory-info ref="factory" /></el-tab-pane>
        <el-tab-pane label="设备/物流信息"> <equipment-info ref="equipment" /></el-tab-pane>
      </el-tabs>
    </basic-container>
  </div>
</template>

<script>
import { option } from '@/option/tenant/supplier/recommend-form'
import CurdTitle from '@/components/base/title.vue'
import { save, submit, getDetail } from '@/api/supplier/recommend'
import ContactsInfo from '@/views/tenant/supplier/info/components/contacts-info'
import EquipmentInfo from '@/views/tenant/supplier/info/components/equipment-info'
import FactoryInfo from '@/views/tenant/supplier/info/components/factory-info'
import FinanceInfo from '@/views/tenant/supplier/info/components/finance-info'
import QualificationsInfo from '@/views/tenant/supplier/info/components/qualifications-info'
import { detailAll } from '@/api/supplier/info'

const supplierOption = [
  { label: '选择', prop: 'radio', width: 50 },
  { label: '供应商编码', prop: 'supplierCode' },
  { label: '供应商名称', prop: 'supplierName' },
  { label: '供应商简称', prop: 'supplierShortName' },
  { label: '联系人', prop: 'contact' },
  { label: '手机号', prop: 'phone' }
]
export default {
  name: 'RecommendOperation',
  props: ['type', 'param'],
  provide() {
    return { type: 'view', infoFlg: false }
  },
  components: { CurdTitle, ContactsInfo, EquipmentInfo, FactoryInfo, FinanceInfo, QualificationsInfo },
  data() {
    return {
      form: {
        attachments: []
      },
      option: option.call(this),
      checkInfo: {},
      supplierId: '',
      supplierInfo: {},
      loading: false,
      baseLoading: false,
      processId: ''
    }
  },
  mounted() {
    if (['view', 'edit'].includes(this.type)) {
      return this.getInfo(this.param.id)
    }
  },
  methods: {
    selectSupplier() {
      this.$quickModal({
        title: '选择供应商',
        width: '80%',
        componentIsTag: true,
        component: 'suppliers',
        props: {
          multiple: false,
          columns: supplierOption
        },
        on: {
          change: row => {
            this.form.supplierName = row.supplierName
            this.form.purchaseEngineer = row.purchaseEngineer
            this.form.supplierShortName = row.supplierShortName
            this.getDetailAll(row.id)
          }
        }
      })
    },
    async getInfo(id) {
      this.loading = true
      await getDetail(id).then(res => {
        this.form = res.data.data

        if (!this.form.supplierJson) {
          this.getDetailAll(this.form.supplierId)
        } else {
          this.supplierInfo = this.form.supplierInfoVO
          this.$refs.contacts.contactList = this.form.supplierInfoVO.contactList
          this.$refs.contacts.staffList = this.form.supplierInfoVO.staffList
          this.$refs.finance.financeList = this.form.supplierInfoVO.financeList
          this.$refs.finance.bankList = this.form.supplierInfoVO.bankList
          this.$refs.qualifications.data = this.form.supplierInfoVO.qualificationsList
          this.$refs.factory.factoryList = this.form.supplierInfoVO.factoryList
          this.$refs.factory.productList = this.form.supplierInfoVO.productList
          this.$refs.factory.customerList = this.form.supplierInfoVO.customerList
          this.$refs.factory.materialList = this.form.supplierInfoVO.materialList
          this.$refs.equipment.equipmentList = this.form.supplierInfoVO.equipmentList
          this.$refs.equipment.logisticsList = this.form.supplierInfoVO.logisticsList
          this.loading = false
        }
      })
    },
    async getDetailAll(id) {
      this.baseLoading = !this.loading
      await detailAll({ id: id }).then(res => {
        this.supplierInfo = res.data.data

        this.form.supplierId = this.supplierInfo.id
        this.form.supplierCode = this.supplierInfo.supplierCode
        this.form.supplierName = this.supplierInfo.supplierName
        this.form.supplierShortName = this.supplierInfo.supplierShortName
        this.form.purchaseEngineer = this.supplierInfo.purchaseEngineer

        this.$refs.contacts.contactList = this.supplierInfo.contactList
        this.$refs.contacts.staffList = this.supplierInfo.staffList
        this.$refs.finance.financeList = this.supplierInfo.financeList
        this.$refs.finance.bankList = this.supplierInfo.bankList
        this.$refs.qualifications.data = this.supplierInfo.qualificationsList
        this.$refs.factory.factoryList = this.supplierInfo.factoryList
        this.$refs.factory.productList = this.supplierInfo.productList
        this.$refs.factory.customerList = this.supplierInfo.customerList
        this.$refs.factory.materialList = this.supplierInfo.materialList
        this.$refs.equipment.equipmentList = this.supplierInfo.equipmentList
        this.$refs.equipment.logisticsList = this.supplierInfo.logisticsList
        this.baseLoading = false
        this.loading = false
      })
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          save({ ...this.form, isSubmit: true }).then(() => {
            this.$message.success('保存成功!')
            this.$emit('update:visible', false)
            this.$emit('refresh')
          })
        }
      })
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          submit({ ...this.form, isSubmit: true }).then(() => {
            this.$message.success('提交成功!')
            this.$emit('update:visible', false)
            this.$emit('refresh')
          })
        }
      })
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped></style>
